<template>
   <view>
      <u-navbar title="我的课程" autoBack fixed placeholder></u-navbar>
      <view class="content">
         <u-gap height="10" bgColor="#f5f5f5"></u-gap>
         <u-cell isLink style="background-color: #fff;" v-for="item in items" :key="item.id" @click="goItem(item)">
            <u-text slot="title" :text="item.course" :lines="2" bold :size="18"></u-text>
            <view slot="label" style="display: flex;margin-top: 5px;" class="label">
               <u-tag :text="clazz.name" size="mini" plain type="info" v-for="clazz in item.classes" :key="clazz.id"></u-tag>
            </view>
         </u-cell>
      </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            items: [
               {
                  id: '1',
               	course: 'C#程序设计',
                  classes: [
                     {
                        id: '1',
                        name: '软件工程01'
                     }, {
                        id: '2',
                        name: '软件工程02'
                     }
                  ]
               },{
                  id: '2',
               	course: '大型数据库系统技术与应用',
                  classes: [
                     {
                        id: '1',
                        name: '软件工程01'
                     }, {
                        id: '2',
                        name: '软件工程02'
                     }
                  ]
               }
            ]
         }
      },
      methods: {
         goItem(item) {
            uni.$emit('selectCourse', {item})
            uni.navigateBack()
         }
      }
   }
</script>

<style lang="scss" scoped>
   .label {
      ::v-deep .u-tag-wrapper {
         margin: 0 12px 0 0;
      }
   }
</style>
